<template>
  <div class="financial">
    <div class="flex justify-between box-border px-30 mt-43">
      <div @click="onTab(0)" :class="{ active: tapIndex === 0 }"
        class=" w-370 h-75 lh-75 rounded-lg font-27 text-center mr-20">{{ $t('货币理财') }}</div>
      <div @click="onTab(1)" :class="{ active: tapIndex === 1 }" class=" w-370 h-75 lh-75 rounded-lg font-27 text-center">
        {{ $t('矿池理财') }}</div>
    </div>
    <div class="box-border px-30 mt-42">
      <div class="text-grey font-30 mb-30">UID:{{ userInfo.usercode }}</div>
      <div class="flex justify-between text-grey relative">
        <div class="flex">
          <span class="text-grey font-30">{{ $t('总资产') }}（USDT）</span>
          <div @click.stop="changeEyes">
            <img :src="require('../../assets/image/assets-center/eye-open.png')" class="w-32 h-18" v-show="!eyetel" />
            <img :src="require('../../assets/image/assets-center/eye-close.png')" class="w-32 h-18" v-show="eyetel" />
          </div>
        </div>
        <div class="right-clock">
          <img v-if="tapIndex === 0" @click="$router.push({ path: '/financialHistory', query: { type: 0 } })"
            :src="require('../../assets/image/assets-center/Subtract.png')" class="w-36 h-40" />
          <img v-if="tapIndex === 1" @click="$router.push({ path: '/financialHistory', query: { type: 1 } })"
            :src="require('../../assets/image/assets-center/Subtract.png')" class="w-36 h-40" />
        </div>
      </div>
      <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel">
        <template v-if="tapIndex === 0">{{ funds.money_finance || '--' }}</template>
        <template v-if="tapIndex === 1">{{ funds.money_miner || '--' }}</template>
        <span class="font-39 text-grey" v-if="tapIndex === 0">≈{{ currency.currency_symbol }}{{ funds.money_finance ?
          (funds.money_finance *
            currency.rate).toFixed(2) : ' --' }}</span>
        <span class="font-39 text-grey" v-if="tapIndex === 1">≈{{ currency.currency_symbol }}{{ funds.money_miner ?
          (funds.money_miner *
            currency.rate).toFixed(2) : ' --' }}</span>
      </div>
      <div class="font-70 font-66 mt-18 textColor" v-else>********</div>
      <div class="flex font-26 lh-32 mb-35 mt-40">
        <div class="flex flex-col ">
          <div>{{ $t('预计日收益') }}（{{ finData.outputCurrency ? finData.outputCurrency.toUpperCase() : 'USDT' }}）</div>
          <template v-if="!eyetel">
            <div class="font-40 mt-17 mb-9 textColor">{{ finData.today_profit || '--' }}</div>
            <!-- <div>≈{{currency.currency_symbol}}{{ finData.today_profit ? (finData.today_profit *
            currency.rate).toFixed(2) : ' --' }}</div> -->
          </template>
          <template v-else>
            <div class="font-40 mt-17 mb-9 textColor">********</div>
          </template>
        </div>
        <div class="flex flex-col ml-110">
          <div>{{ $t('累计收益') }}（{{ finData.outputCurrency ? finData.outputCurrency.toUpperCase() : 'USDT' }}）</div>
          <template v-if="!eyetel">
            <div class="font-40 mt-17 mb-9 textColor">{{ finData.aready_profit || '0.00' }}</div>
            <!-- <div>≈{{currency.currency_symbol}}{{ finData.aready_profit ? (finData.aready_profit *
            currency.rate).toFixed(2) : '0.00' }}</div> -->
          </template>
          <template v-else>
            <div class="font-40 mt-17 mb-9 textColor">********</div>
          </template>
        </div>
      </div>
      <div class="flex flex-col lh-32 mb-35 ">
        <div>{{ $t('托管中总订单') }}</div>
        <template v-if="!eyetel">
          <div class="font-40 mt-17 mb-9 textColor">{{ finData.order_sum || 0 }}</div>
        </template>
        <template v-else>
          <div class="font-40 mt-17 mb-9 textColor">********</div>
        </template>
      </div>
    </div>
    <div class="w-full h-13 contBackground"></div>
    <div class="px-30">
      <div class="flex justify-between h-36 mt-37">
        <div v-if="tapIndex === 0" class=" font-6 h-36 lh-36 textColor">{{ $t('所有理财') }}</div>
        <div v-if="tapIndex === 0" class="font-26 blue h-36 lh-36 colorMain"
          @click="$router.push({ path: '/fund-rule', query: { back: 0 } })">{{ $t('规则') }}</div>
        <div v-if="tapIndex === 1" class=" font-6 h-36 lh-36 textColor">{{ $t('所有矿机') }}</div>
        <div v-if="tapIndex === 1" class="font-26 blue h-36 lh-36 colorMain"
          @click="$router.push({ path: '/machine-rule', query: { back: 0 } })">{{ $t('规则') }}</div>
      </div>
      <template v-if="tapIndex === 0">
        <financial-list :list="finList" :type="tapIndex" :btnShow="true"></financial-list>
      </template>
      <template v-else>
        <financial-list :list="machineList" :type="tapIndex" :btnShow="true"></financial-list>
      </template>

    </div>
  </div>
</template>

<script>
import { Icon } from 'vant';
import { mapGetters } from "vuex";
import financialList from "@/components/assetsCenter/financialList";
import { financeStatics, getMiningRevenueStatisticsList, getMachineBought, getfinacialProductsBought } from '@/API/financialManagement'
export default {
  name: "financial",
  components: {
    [Icon.name]: Icon,
    financialList
  },
  props: ['funds', 'index'],
  data() {
    return {
      tapIndex: 0,
      eyetel: false,
      total: "",
      finData: {},
      finList: [],
      machineList: []
      // minData: {}
    }
  },
  watch: {
    index: {
      handler: function (val) {
        this.tapIndex = val / 1
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters('home', ['currency']),
    ...mapGetters('user', ['userInfo'])
  },
  mounted() {
    console.log(this.currency)
    this.onTab(this.tapIndex)
  },
  methods: {
    onTab(index) {
      this.tapIndex = index
      if (index === 0) { // 理财
        this.getFin()
        getfinacialProductsBought({
          page_no: 1,
          state: '1'
        }).then(res => {
          this.finList = res.data
          // console.log('已购理财', res)
          // console.log(data)
        })
      } else { // 矿机
        this.getMin()
        getMachineBought({
          page_no: 1,
          state: 1
        }).then(res => {
          this.machineList = res.data
          // console.log('已购矿机产品', res)
        })
      }
    },
    getFin() {
      financeStatics().then(data => {
        this.finData = data.data
      })
    },
    getMin() {
      getMiningRevenueStatisticsList().then(data => {
        this.finData = data.data
      })
    },
    changeEyes() {
      this.eyetel = !this.eyetel;
    },
  }
}
</script>

<style  lang="scss" scoped>
.w-370 {
  border: 1px solid #EAEDF2;
  color: #868D9A;
}

.active {
  color: #FFFFFF;

  @include themify() {
    background: themed("btn_main");
  }

  @include themify() {
    border-color: themed("btn_main");
  }
}

.lh-32 {
  color: #848E9C;
}

.font-40 {
  font-weight: 700;
}

.cl {
  color: #333333;
  background: #EBECF0;
}

.mr-13 {
  font-weight: 600;
  color: #333333;
}

.col {
  color: #848E9C;
}

.font-6 {
  font-weight: 600;
}

font-4 {
  font-weight: 400;
}

cl-33 {
  color: #333333;
}
</style>
